Elementos componentes do HTML 11

HTML - Elementos componentes do HTML 11

Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :

Classes dos elementos HTML:

1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer> <header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure> <figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code> <data><dfn><em><i><kbd><mark><q><s><samp> <small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table> <tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input> <label><legend><meter><optgroup><option><output><progress> <select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>

Neste documento discutiremos a classe 12-ELEMENTOS INTERATIVOS.

<details>

A tag <details> especifica detalhes adicionais que o usuário pode exibir ou ocultar sob demanda.
A tag <detalhes> pode ser usada para criar um widget interativo que o usuário pode abrir e fechar. Qualquer tipo de conteúdo pode ser colocado dentro da tag <details>.
O conteúdo de um elemento <details> é ocultado na exibição inicial, a menos que o atributo aberto esteja definido e ao clicar no elemento ele abre e exibe o restante.
É um conteúdo onde o summary é exibido mas o que esta fora só será exibido se o usuário solicitar.
Nota : Ainda não é suportado pelo Edge.

Exemplo:
        <details>
            <summary>Copyright 1999-2019.</summary>
            <p> - by Antonio C. S. Bonito. All Rights Reserved.</p>
            <p>All content on this web site are the property of the company ACSB Enterprises.</p>
        </details>

Como o browser exibe:

All content on this web site are the property of the company ACSB Enterprises.

A tag <menu> define uma lista / menu de comandos.
A tag <menu> é usada para menus de contexto, barras de ferramentas e para listar controles e comandos de formulário.
Infelizmente este recurso apenas o Firefox exibirá corretamente.

Exemplo:
        <menu type="context" id="mymenu">
          <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
          </menuitem>
          <menu label="Share on...">
            <menuitem label="Twitter" icon="ico_twitter.png"
            onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
            </menuitem>
            <menuitem label="Facebook" icon="ico_facebook.png"
            onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
            </menuitem>
          </menu>
          <menuitem label="Email This Page"
          onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
        </menu>

Como o browser exibe:

<menuitem>

Define um item de opção do elemento menu apresentado acima.

<summary>

A tag <summary> define um cabeçalho visível para o elemento <details>. É possível clicar no cabeçalho para visualizar / ocultar os detalhes.
É usada na tag details vista acima.